<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<style>
		.outer_box {
			width: 1258px;
			height: 414px;
			border: 1px solid red;
		}
		.outer_box .inner_box {
			width: 314px;
			height: 414px;
			/* 在父容器div下，不够填的内容就会自动移动到下面 */
			float: left;
			/* 父容器这里设置好内容居中后，就没必要在子元素设置了 */
			text-align: center;
		}
		.inner_box .new {
			background-color: #83c44e;
			width: 80px;
			height: 25px;
			text-align: center;
			margin-top: 20px;
			margin-left: auto;
			margin-right: auto;
			color: #efefef;
			/* margin: auto; */
		}
		.inner_box .pic {
			margin-top: 20px;
		}
		.inner_box .t1 {
			margin-top: 30px;
			font-size: 18px;
		}
		.inner_box .mess {
			font-size: 13px;
			color: #b0afb0;
		}
		.inner_box .money {
			margin: 10px;
			font-size: 15px;
			color: #e5602a;
		}
		.inner_box:hover {
			box-shadow: 0px 10px 15px #ccc;
			border-radius: 20px;
			margin-top: -10px;
		}
	</style>
	<body>
		<div class="outer_box">
			<div class="inner_box">
				<div class="new">新品</div>
				<img class="pic" src="./p1.png" />
				<div class="t1">小米9 6GB+128GB</div>
				<div class="mess">晓龙855，索尼4800万超广角微距三摄</div>
				<div class="money">2999元</div>
			</div>
			<div class="inner_box">
				<div class="new">新品</div>
				<img class="pic" src="./p2.png" />
				<div class="t1">小米9 6GB+64GB</div>
				<div class="mess">索尼4800万超广角微距三摄，晓龙712</div>
				<div class="money">1999元</div>
			</div>
			<div class="inner_box">
				<div class="new">新品</div>
				<img class="pic" src="./p3.png" />
				<div class="t1">Redmi Note 3GB+32GB</div>
				<div class="mess">4800拍摄千元手机，18个月超长质保</div>
				<div class="money">999元</div>
			</div>
			<div class="inner_box">
				<div class="new">新品</div>
				<img class="pic" src="./p4.png" />
				<div class="t1">小米Play 4GB+64GB</div>
				<div class="mess">5.84"小水滴全面屏，后置1200万AI</div>
				<div class="money">1099元</div>
			</div>
		</div>
	</body>
</html>
